<template>
	<view class="flex chooseImage flex_wrap">
		<view class="relative" v-for="(item, index) in imgList" :key="index" @tap="viewImg" :data-url="imgList[index]" :style="{ width: wH + 'rpx', height: wH + 'rpx' }">
			<image :src="imgList[index]" :style="{ width: wH + 'rpx', height: wH + 'rpx' }"></image>
			<view class="icon_close absolute" @tap="delImg" :data-index="index"><i class="iconfont " style="">&#xe635;</i></view>
		</view>
		<view v-if="imgList.length < num" class="text_center add" @tap="chooseImage">
			<image src="http://www.xyzgy.xyz/image/upload.png" mode="widthFix" :style="{ width: wH + 'rpx' }"></image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		wH: {
			type: Number,
			default: 200
		},
		num: {
			type: Number,
			default: 9
		},
		isBase64: {
			type: Boolean,
			default: false
		},
		isBaseStr:{
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			imgList: [],
			hasChooseImage: false,
			chooseImageSrc: '',
			base64: ''
		};
	},
	methods: {
		chooseImage: async function() {
			let _this = this;
			await _this.getImage();
			this.$emit('chooseImage', _this.imgList);
		},
		getImage() {
			let _this = this;
			let _count = _this.num - _this.imgList.length;
			return new Promise((resolve, reject) => {
				uni.chooseImage({
					count: _count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						console.log(res);
						_this.hasChooseImage = true;
						_this.chooseImageSrc = res.tempFilePaths[0];
						if (_this.isBase64) {
							uni.getFileSystemManager().readFile({
								filePath: res.tempFilePaths[0], //选择图片返回的相对路径
								encoding: 'base64', //编码格式
								success: function(ress) {
									console.log(ress);
									//成功的回调
									let base64 = _this.isBaseStr ? 'data:image/jpeg;base64,' + ress.data : ress.data; //不加上这串字符，在页面无法显示的哦
									if (_this.imgList.length != 0) {
										_this.imgList = _this.imgList.concat(base64);
									} else {
										_this.imgList = [base64];
									}

									resolve(_this.imgList);
								}
							});
						} else {
							if (_this.imgList.length != 0) {
								_this.imgList = _this.imgList.concat(res.tempFilePaths);
							} else {
								_this.imgList = res.tempFilePaths;
							}
							resolve(_this.imgList);
						}
					}
				});
			});
		},
		delImg(e) {
			this.imgList.splice(e.currentTarget.dataset.index, 1);
			this.imgList = this.imgList;
			this.$emit('delImg', this.imgList);
		},
		viewImg(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		}
	}
};
</script>

<style lang="less" scoped="">
.chooseImage {
	> view {
		margin: 0 20px 20px 0;
	}
	.icon_close {
		right: -10rpx;
		top: -10rpx;
		.iconfont {
			background: #ccc;
			border-radius: 50%;
			padding: 8px;
			font-size: 20rpx;
		}
	}
}
</style>
